<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 250px;
            background-color: #ccc;
            margin:10px;
            padding: 10px;
        }
    
    </style>
</head>
<body>
    <div class="box">

        <div>
            <span id="codeShow">000123</span> <button id="shiftCode">看不清，换一张</button>
        </div>
        <br>
        <div class="inputCode">
            验证码：<input type="text" id="inputText" maxlength="6">
        </div>
        <br>
        <button id="ensure">提交</button>
    </div>
   
    <script>
      
        let codeDom = document.getElementById('shiftCode')
       
        let verify = () => {
            // 随机数素材
            let code = []
            for(let i = 0 ; i < 6 ; i++){
            // 初始化数组
            if(i==0) code = []
            let team = ''
           // 随机生成数字
           team += parseInt(Math.random()*10)

            if(i%2==1){
            // 随机生成大写字母  code码在65 到 90 之间
            team += String.fromCharCode(65+parseInt(Math.random()*25))
            }else{
            // 随机生成小写字母
            team += String.fromCharCode(65+parseInt(Math.random()*25)).toLowerCase()
            }

           code.push(team)
          }
        //  随机数  
         let codeverify = ''
        //  开始执行随机数 取值
          for(let j = 0 ; j < 6 ; j++ ){
            // 随机数素材里的随机一位
            codeverify += code.join('')[parseInt(Math.random()*code.join('').length)]
            if(j == 5){
                // 渲染页面
                document.getElementById('codeShow').innerText = codeverify
            }
          }
        }
        // 进来 获取一次验证码
        verify()
        // 更换验证码
        codeDom.addEventListener('click',()=>{
          verify()
        })

        // 提交按钮
        let ensure = document.getElementById('ensure')

        ensure.addEventListener('click',()=>{
            let inputText = document.getElementById('inputText').value
            let code = document.getElementById('codeShow').innerText
            // 验证码和输入框信息比对
           if(inputText != code) {
            // 不匹配 更新验证码 重置输入框
            verify()
            document.getElementById('inputText').value = ''
            return alert('验证码不正确')
           }
        //    匹配
           return alert('验证码正确')
        })

    </script>
</body>
</html>